<template>
    <el-row>
        <el-col :span="12">
            <div id="barEmp"></div>
        </el-col>
        <el-col :span="12" >
            <div id="ringEmpGender"></div>
        </el-col>
    </el-row>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { getEmpPostData, getEmpGenderData } from '@/api/report'

// 需要展示的两张图表
let barEmpChart = null
let ringEmpGenderChart = null
// 员工部门统计
onMounted(() => {
    qyueryEmpPostData()
    queryEmpGenderData()
    window.addEventListener('resize', handleResize)
})
// 卸载监听

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

const handleResize = () => {
     //自适应大小
    barEmpChart.resize()
    ringEmpGenderChart.resize()
}
// 部门图
const empList = ref()
const empPersons = ref()
const qyueryEmpPostData = async()=>{
    const res = await getEmpPostData()
    empList.value = res.data.empList
    empPersons.value = res.data.count
    barEmp()
}
const barEmp = () => {
    barEmpChart = echarts.init(document.getElementById("barEmp"));
    let option = {
        title: {
          text: '员工部门统计',
          x:'center',
          y:'top',
        },
        xAxis: {
          type: 'category',
          data: empList.value
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: empPersons.value,
            type: 'bar'
          }
        ]
    }
    option && barEmpChart.setOption(option);
}

// 员工性别统计
const empGender = ref()
const queryEmpGenderData = async()=>{
    const res = await getEmpGenderData()
    empGender.value = res.data
    ringEmpGender()
}
const ringEmpGender = ()=>{
    ringEmpGenderChart = echarts.init(document.getElementById("ringEmpGender"));
    let option = {
        title: {
          text: '员工性别统计',
          x:'center',
          y:'top',
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            data: empGender.value,
          }
        ]
    }
    option && ringEmpGenderChart.setOption(option);
   
}




</script>

<style scope>
#barEmp, #ringEmpGender {
    height: 80vh;
}
</style>